import React, { useEffect, useState } from "react";
import { Layout, Button, Space, Avatar, Dropdown } from "antd";
import { setCollapsed } from "@/store/modules/app";
import { setUserInfo } from "@/store/modules/user";
import ColorPick from '@/layouts/components/ColorPicker'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  QuestionOutlined,
  SyncOutlined,
} from "@ant-design/icons";
import { useDispatch, useSelector } from "react-redux";
import { getUserAccount, logoutInterface } from "@/api/user";
import { useNavigate } from "react-router-dom";
import store from "store2";
import { setLoginStatus } from "@/store/modules/user";
import AppBreadCrumb from "@/layouts/components/AppBreadCrumb";
import { setTourGuide } from "@/store/modules/app";
import homeStyle from '@/styles/home.module.scss'
import axios from "axios";

const { Header } = Layout;

export default function AppHeader() {
  const { collapsed } = useSelector((state) => state.appSlice);
  const { userInfo } = useSelector((state) => state.userSlice);
  const [oneWord, setOneWord] = useState({});
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const getOneWord = () => { 
    axios.get("https://v1.hitokoto.cn/").then((res) => {
   setOneWord(res?.data);
 });
  }

  useEffect(() => {
    getOneWord();
    getUserAccount().then((res) => {
      dispatch(setUserInfo(res.data.profile));
    });
  }, [dispatch]);
  const items = [
    {
      key: "/setting",
      label: <span>设置</span>,
    },
    {
      key: "/account/userlist",
      label: <span>用户</span>,
    },
    {
      key: "/logout",
      label: <span>退出</span>,
    },
  ];

  const onClick = ({ key }) => {
    if (key === "/logout") {
      logoutInterface().then(() => {
        store.remove("userInfo");
        dispatch(setLoginStatus(false));
      });
    } else {
      navigate(key);
    }
  };
  return (
    <Header
      theme="dark"
      id="header"
      style={{ backgroundColor: "#fff", paddingLeft: "10px" }}
    >
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => dispatch(setCollapsed(!collapsed))}
      />
      {/* S 面包屑导航 */}
      <AppBreadCrumb />
      {/* E 面包屑导航 */}

      <Space align="center" style={{ float: "right" }}>
        {/* oneWord  S */}
        <h3 className={homeStyle.oneword} style={{ margiLeft: "20px" }}>{`${
          oneWord?.hitokoto
        } — ${oneWord?.from_who ?? "佚名"}《${oneWord?.from}》`}</h3>
        <SyncOutlined
          onClick={() => {
            getOneWord();
          }}
        />
        {/* oneWord  E */}
        <Button
          type="text"
          style={{ color: "orange" }}
          icon={<QuestionOutlined />}
          onClick={() => dispatch(setTourGuide(true))}
        >
          新手引导
        </Button>
        <ColorPick/>
        欢迎你: {userInfo.nickname}
        <Dropdown menu={{ items, onClick }}>
          <span>
            <Avatar src={userInfo.avatarUrl} />
          </span>
        </Dropdown>
      </Space>
    </Header>
  );
}
